<template>
  <div class="projects-main-container">
    <!-- 页面头部（仅在非详情路由时显示） -->
    <div v-if="!isDetailRoute" class="page-header">
      <div class="header-left">
        <h1 class="page-title">项目管理</h1>
        <p class="page-description">管理和跟踪所有项目的进度和状态</p>
      </div>
      <div class="header-right">
        <!-- 页签切换按钮 -->
        <el-radio-group
          v-model="activeTab"
          class="tab-switcher"
          @change="handleTabChange"
        >
          <el-radio-button label="list">列表</el-radio-button>
          <el-radio-button label="dashboard">规划</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrapper" :class="{ 'detail-route': isDetailRoute }">
      <!-- 子路由视图（项目详情、成员管理等） -->
      <router-view v-if="isDetailRoute" />
      
      <!-- 主内容（列表或仪表盘） -->
      <template v-else>
        <ProjectsList 
          v-if="activeTab === 'list'" 
          ref="listRef" 
          :hide-header="true"
          :show-create-button="true"
          @create-project="handleCreateProject"
        />
        <ProjectsDashboard 
          v-if="activeTab === 'dashboard'" 
          ref="dashboardRef" 
          :hide-header="true" 
        />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ProjectsList from './index.vue'
import ProjectsDashboard from './dashboard.vue'

const router = useRouter()
const route = useRoute()
const activeTab = ref('list')
const listRef = ref()
const dashboardRef = ref()

// 判断是否为详情路由（项目详情或成员管理）
const isDetailRoute = computed(() => {
  return route.name === 'ProjectDetail' || route.name === 'ProjectMembers'
})

// 处理页签切换
const handleTabChange = (_val: string | number | boolean | undefined) => {
  // 页签切换时不需要改变URL，因为都在同一个路由下
  // _val 参数由 el-radio-group 的 change 事件提供，但当前不需要使用
}

// 处理新建项目
const handleCreateProject = () => {
  // 触发项目列表组件的新建项目功能
  if (listRef.value && listRef.value.projectDialogStore) {
    listRef.value.projectDialogStore.openCreateDialog()
  } else {
    // 如果无法访问，直接跳转到创建页面
    router.push('/projects/create')
  }
}

// 根据路由初始化页签（如果有查询参数）
onMounted(() => {
  const tab = route.query.tab as string
  if (tab === 'dashboard') {
    activeTab.value = 'dashboard'
  } else {
    activeTab.value = 'list'
  }
})

// 监听路由变化
watch(() => route.query.tab, (newTab) => {
  if (newTab === 'dashboard') {
    activeTab.value = 'dashboard'
  } else {
    activeTab.value = 'list'
  }
})
</script>

<style scoped lang="scss">
.projects-main-container {
  padding: 24px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-description {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.header-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tab-switcher {
  background-color: #f5f7fa;
  border-radius: 6px;
  padding: 2px;
  display: inline-flex;
  
  :deep(.el-radio-button) {
    margin: 0;
  }
  
  :deep(.el-radio-button__inner) {
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: transparent;
    border: none;
    color: #606266;
    box-shadow: none;
  }
  
  :deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  :deep(.el-radio-button:last-child .el-radio-button__inner) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
    background-color: #ffffff;
    color: #303133;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
  
  :deep(.el-radio-button__inner:hover) {
    color: #303133;
  }
  
  :deep(.el-radio-button__original-radio:not(:checked) + .el-radio-button__inner) {
    background-color: transparent;
    color: #606266;
  }
}

.content-wrapper {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  &.detail-route {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
}
</style>

